<template>
  <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="router.back()" />
  <div class="setting">
    <div class="group">
      <div class="option" @click="changePassword">
        <span>账号与安全</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="group">
      <div class="option">
        <span>安全中心</span>
        <span>安全问题解决与咨询</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>消息通知设置</span>
        <span>订单、优惠通知等</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>通用设置</span>
        <span>清理缓存、图片质量</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>桌面小组件</span>
        <span>管理你的桌面小组件</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="group">
      <div class="option" @click="openAboutPopup">
        <span>关于</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>问题咨询及反馈</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>个人信息收集清单</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>第三方信息数据共享</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>规则中心</span>
        <van-icon name="arrow" />
      </div>
      <div class="option">
        <span>喜欢我们，打分鼓励</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="group">
      <div class="option">
        <span>长辈模式</span>
        <span>开启后使用更简单</span>
        <van-switch v-model="elderMode" />
      </div>
    </div>
    <div class="logout" @click="logout">
      退出当前账号
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';

const router = useRouter();
const elderMode = ref(false);

const changePassword = () => {
  router.push({ name: 'changepassword' });
};

// 更新函数以打开 AboutPopup
const openAboutPopup = () => {
  // 假设 AboutPopup 是一个路由名称
  router.push({ name: 'AboutPopup' });
};

const logout = () => {
  // 实现退出账号逻辑
};
</script>

<style scoped>
.setting {
  background-color: #f5f5f5;
  padding: 10px;
}

.group {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  font-size: 24px; /* 增大字体大小 */
  color: #333;
}

.option:last-child {
  border-bottom: none;
}

.option span {
  flex: 1;
}

.van-switch {
  margin-left: 10px;
}

.van-icon {
  color: #999;
}

.logout {
  text-align: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  font-size: 34px; /* 增大字体大小 */
  color: #d9534f;
  cursor: pointer;
  margin-top: 10px;
}
</style>